CSS ग्रिड ट्रॅक साइझिंग: इंट्रिन्सिक आणि एक्सट्रिन्सिक नियंत्रणात प्राविण्य

CSS ग्रिड लेआउट हे क्लिष्ट आणि रिस्पॉन्सिव्ह वेब लेआउट तयार करण्यासाठी एक शक्तिशाली साधन आहे. त्याची लवचिक ट्रॅक साइझिंग क्षमता ही त्याची एक प्रमुख ताकद आहे, ज्यामुळे तुम्हाला पंक्ती (rows) आणि स्तंभांच्या (columns) आकारावर अचूकपणे नियंत्रण ठेवता येते. जुळवून घेणारे आणि देखरेख करण्यास सोपे लेआउट तयार करण्यासाठी विविध ट्रॅक साइझिंग कीवर्ड आणि फंक्शन्स समजून घेणे महत्त्वाचे आहे. हा लेख CSS ग्रिडमधील इंट्रिन्सिक आणि एक्सट्रिन्सिक साइझिंगच्या प्रगत संकल्पनांचा सखोल अभ्यास करतो, आणि ते विविध कंटेंट व स्क्रीन साइझनुसार जुळवून घेणारे लेआउट्स कसे तयार करतात हे स्पष्ट करतो.

ग्रिड ट्रॅक्स आणि साइझिंग समजून घेणे

इंट्रिन्सिक आणि एक्सट्रिन्सिक साइझिंगच्या तपशिलात जाण्यापूर्वी, चला CSS ग्रिड ट्रॅक्सच्या मूलभूत संकल्पनांची उजळणी करूया.

ग्रिड ट्रॅक्स म्हणजे काय?

ग्रिड ट्रॅक्स म्हणजे ग्रिड लेआउटमधील पंक्ती (rows) आणि स्तंभ (columns). ते ग्रिड आयटम्स ठेवण्याची रचना परिभाषित करतात. या ट्रॅक्सचा आकार थेट संपूर्ण लेआउटवर आणि ग्रिडमध्ये कंटेंट कसे वितरित केले जाते यावर परिणाम करतो.

ट्रॅक साइझ निर्दिष्ट करणे

तुम्ही grid-template-rows आणि grid-template-columns प्रॉपर्टीज वापरून ट्रॅक साइझ परिभाषित करू शकता. या प्रॉपर्टीज स्पेसने-विभक्त केलेल्या मूल्यांची सूची स्वीकारतात, जिथे प्रत्येक मूल्य संबंधित ट्रॅकचा आकार दर्शवते. उदाहरणार्थ:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
}

            

              
                Copy
              
            
          

हा कोड तीन स्तंभ आणि दोन पंक्तींसह एक ग्रिड तयार करतो. पहिला आणि तिसरा स्तंभ प्रत्येकी उपलब्ध जागेचा १ फ्रॅक्शन (fr) घेतो, तर दुसरा स्तंभ २ फ्रॅक्शन्स घेतो. पंक्ती त्यांच्या कंटेंटनुसार आपोआप आकाराच्या होतात.

इंट्रिन्सिक विरुद्ध एक्सट्रिन्सिक साइझिंग

प्रगत ग्रिड ट्रॅक साइझिंगचा गाभा इंट्रिन्सिक आणि एक्सट्रिन्सिक साइझिंगमधील फरक समजून घेण्यात आहे. या संकल्पना ठरवतात की ट्रॅकचा आकार त्याच्या कंटेंट आणि उपलब्ध जागेनुसार कसा निश्चित केला जातो.

इंट्रिन्सिक साइझिंग: कंटेंट-आधारित

इंट्रिन्सिक साइझिंग म्हणजे ग्रिड ट्रॅकचा आकार त्या ट्रॅकमध्ये ठेवलेल्या ग्रिड आयटममधील कंटेंटद्वारे निर्धारित केला जातो. ट्रॅक कंटेंटला सामावून घेण्यासाठी, काही मर्यादांपर्यंत, विस्तारतो किंवा आकुंचन पावतो. इंट्रिन्सिक साइझिंग कीवर्ड्समध्ये खालील गोष्टींचा समावेश आहे:

• auto: हे डिफॉल्ट मूल्य आहे. ट्रॅकमधील ग्रिड आयटमच्या सर्वात मोठ्या किमान आकार योगदानाद्वारे ट्रॅकचा आकार निर्धारित केला जातो. बहुतेक प्रकरणांमध्ये, याचा अर्थ असा होतो की ट्रॅक सर्व कंटेंटला ओव्हरफ्लो न होता फिट करण्यासाठी पुरेसा मोठा असेल, परंतु ग्रिड आयटमवर सेट केलेल्या min-width/min-height मूल्यांमुळे त्यावर परिणाम होऊ शकतो.
• min-content: कंटेंटला ओव्हरफ्लो न होता लागणाऱ्या कमीतकमी जागेत बसवण्यासाठी ट्रॅकचा आकार निश्चित केला जातो. उदाहरणार्थ, टेक्स्ट सर्वात लहान संभाव्य ठिकाणी रॅप होईल, जरी त्यामुळे शब्द विचित्रपणे तुटत असले तरी.
• max-content: कंटेंटला ओव्हरफ्लो न होता लागणाऱ्या जास्तीत जास्त जागेत बसवण्यासाठी ट्रॅकचा आकार निश्चित केला जातो. टेक्स्टसाठी, याचा अर्थ असा की ते शक्य तितके रॅपिंग टाळण्याचा प्रयत्न करेल, ज्यामुळे संभाव्यतः खूप रुंद किंवा उंच ट्रॅक होऊ शकतात.
• fit-content(length): ट्रॅकचा आकार max-content आणि निर्दिष्ट length यापैकी जो लहान असेल तो घेतला जातो. हे तुम्हाला ट्रॅकसाठी कमाल आकार सेट करण्याची परवानगी देते आणि तरीही त्याच्या कंटेंटनुसार त्याला लहान होऊ देते.

उदाहरण: min-content आणि max-content सह इंट्रिन्सिक साइझिंग

दोन स्तंभांचे एक उदाहरण विचारात घ्या. पहिल्या स्तंभाचा आकार min-content ने आणि दुसऱ्याचा max-content ने निश्चित केला आहे. जर पहिल्या स्तंभातील कंटेंट एक लांब शब्द असेल, तर तो किमान कंटेंट आकारात बसण्यासाठी कोणत्याही संभाव्य ठिकाणी तोडला जाईल. तथापि, दुसरा स्तंभ कंटेंटला रॅप न करता सामावून घेण्यासाठी विस्तारेल.

            .grid-container {
  display: grid;
  grid-template-columns: min-content max-content;
  grid-gap: 10px;
}

.item1 {
  grid-column: 1;
}

.item2 {
  grid-column: 2;
}

            

              
                Copy
              
            
          

            <div class="grid-container">
  <div class="item1">Supercalifragilisticexpialidocious</div>
  <div class="item2">Short text</div>
</div>

            

              
                Copy
              
            
          

या उदाहरणात, "Supercalifragilisticexpialidocious" हा शब्द पहिल्या स्तंभात अनेक ओळींमध्ये विभागला जाईल, तर "Short text" दुसऱ्या स्तंभात एकाच ओळीत राहील. हे दाखवते की इंट्रिन्सिक साइझिंग कंटेंटच्या मूळ आकाराच्या आवश्यकतांनुसार कसे जुळवून घेते.

उदाहरण: fit-content() सह इंट्रिन्सिक साइझिंग

`fit-content()` फंक्शन उपयुक्त आहे जेव्हा तुम्हाला ट्रॅक कंटेंट-आकारात हवा असतो, पण त्याला कमाल आकाराची मर्यादाही असावी लागते. याचा उपयोग स्तंभ किंवा पंक्तींना खूप मोठे होण्यापासून रोखण्यासाठी केला जाऊ शकतो, तसेच कंटेंट लहान असल्यास त्यांना लहान होण्याची परवानगी देता येते.

            .grid-container {
    display: grid;
    grid-template-columns: fit-content(200px) 1fr;
    grid-gap: 10px;
}

            

              
                Copy
              
            
          

या उदाहरणात, पहिला स्तंभ त्याच्या कंटेंटमध्ये बसण्यासाठी विस्तारेल, परंतु रुंदीत 200px पेक्षा जास्त होणार नाही. दुसरा स्तंभ उर्वरित जागा घेईल. हे अशा लेआउट तयार करण्यासाठी उपयुक्त आहे जिथे तुम्हाला एक स्तंभ लवचिक हवा असतो, पण तो खूप जास्त जागा घेऊ नये असे वाटते.

एक्सट्रिन्सिक साइझिंग: जागेवर-आधारित

दुसरीकडे, एक्सट्रिन्सिक साइझिंग म्हणजे ग्रिड ट्रॅकचा आकार कंटेंटच्या बाहेरील घटकांद्वारे निर्धारित केला जातो, जसे की ग्रिड कंटेनरमधील उपलब्ध जागा किंवा निश्चित आकाराचे मूल्य. एक्सट्रिन्सिक साइझिंग कीवर्ड्समध्ये खालील गोष्टींचा समावेश आहे:

• length: एक निश्चित लांबीचे मूल्य (उदा., 100px, 2em, 50vh). कंटेंट काहीही असो, ट्रॅकचा आकार नेमका एवढाच असेल.
• percentage: ग्रिड कंटेनरच्या आकाराची टक्केवारी (उदा., 50%). ट्रॅक उपलब्ध जागेची ही टक्केवारी घेईल.
• fr (फ्रॅक्शनल युनिट): इतर सर्व ट्रॅक्सचा आकार निश्चित झाल्यानंतर ग्रिड कंटेनरमधील उपलब्ध जागेचा एक अंश दर्शवते. ट्रॅक्समध्ये जागा वितरित करण्याचा हा सर्वात लवचिक मार्ग आहे.

उदाहरण: fr युनिट्ससह एक्सट्रिन्सिक साइझिंग

fr युनिट विविध स्क्रीन साइझनुसार जुळवून घेणारे रिस्पॉन्सिव्ह लेआउट तयार करण्यासाठी अमूल्य आहे. ट्रॅक्सना फ्रॅक्शनल युनिट्स देऊन, तुम्ही हे सुनिश्चित करता की ते उपलब्ध जागा प्रमाणात वाटून घेतील.

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

या उदाहरणात, ग्रिड कंटेनरमध्ये दोन स्तंभ आहेत. पहिला स्तंभ उपलब्ध जागेचा १ फ्रॅक्शन घेतो, तर दुसरा स्तंभ २ फ्रॅक्शन्स घेतो. जर ग्रिड कंटेनर 600px रुंद असेल, तर पहिला स्तंभ 200px रुंद असेल, आणि दुसरा स्तंभ 400px रुंद असेल (कोणत्याही ग्रिड गॅप वजा करून). हे सुनिश्चित करते की स्क्रीनचा आकार काहीही असो, स्तंभ त्यांचे प्रमाणबद्ध संबंध नेहमी राखतात.

उदाहरण: टक्केवारी आणि निश्चित लांबीसह एक्सट्रिन्सिक साइझिंग

            .grid-container {
  display: grid;
  grid-template-columns: 200px 50% 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

या उदाहरणात, पहिल्या स्तंभाची रुंदी `200px` निश्चित केली आहे. दुसरा स्तंभ ग्रिड कंटेनरच्या रुंदीच्या 50% जागा घेईल. शेवटी, तिसरा स्तंभ `1fr` युनिट वापरतो, त्यामुळे पहिल्या दोन स्तंभांचा आकार निश्चित झाल्यानंतर जी काही जागा उरते ती तो घेईल.

इंट्रिन्सिक आणि एक्सट्रिन्सिक साइझिंग एकत्र करणे: minmax()

minmax() फंक्शन तुम्हाला इंट्रिन्सिक आणि एक्सट्रिन्सिक साइझिंग एकत्र करण्याची परवानगी देते, ज्यामुळे ट्रॅकच्या आकारावर अधिक नियंत्रण मिळते. हे ट्रॅकसाठी स्वीकार्य आकारांची श्रेणी परिभाषित करते, ज्यात किमान आणि कमाल दोन्ही मूल्ये निर्दिष्ट केली जातात.

            minmax(min, max)
            

              
                Copy
              
            
          

• min: ट्रॅकचा किमान आकार. हे कोणतेही वैध ट्रॅक साइझिंग मूल्य असू शकते, ज्यात इंट्रिन्सिक कीवर्ड्स (auto, min-content, max-content) किंवा एक्सट्रिन्सिक मूल्ये (length, percentage, fr) यांचा समावेश आहे.
• max: ट्रॅकचा कमाल आकार. हे देखील कोणतेही वैध ट्रॅक साइझिंग मूल्य असू शकते. जर `max` `min` पेक्षा लहान असेल, तर `max` दुर्लक्षित केले जाते आणि `min` वापरले जाते.

उदाहरण: रिस्पॉन्सिव्ह स्तंभांसाठी minmax() वापरणे

minmax() चा एक सामान्य उपयोग म्हणजे रिस्पॉन्सिव्ह स्तंभ तयार करणे ज्यांची किमान रुंदी असते परंतु उपलब्ध जागा भरण्यासाठी ते विस्तारू शकतात.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

येथे, repeat(auto-fit, minmax(200px, 1fr)) शक्य तितके स्तंभ तयार करते जे किमान 200px रुंद असतील परंतु उर्वरित जागा भरण्यासाठी विस्तारू शकतील. auto-fit कीवर्ड हे सुनिश्चित करतो की रिकामे स्तंभ कोलॅप्स होतात, ज्यामुळे एक लवचिक आणि रिस्पॉन्सिव्ह लेआउट तयार होतो.

उदाहरण: minmax() ला इंट्रिन्सिक साइझिंगसह एकत्र करणे

            .grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) 1fr;
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

या उदाहरणात, पहिला स्तंभ किमान त्याच्या किमान कंटेंट आकाराएवढा रुंद असेल, परंतु `300px` पेक्षा जास्त होणार नाही. दुसरा स्तंभ उर्वरित जागा घेईल.

व्यावहारिक अनुप्रयोग आणि सर्वोत्तम पद्धती

मजबूत आणि जुळवून घेणारे लेआउट तयार करण्यासाठी इंट्रिन्सिक आणि एक्सट्रिन्सिक साइझिंग समजून घेणे महत्त्वाचे आहे. येथे काही व्यावहारिक अनुप्रयोग आणि लक्षात ठेवण्यासारख्या सर्वोत्तम पद्धती आहेत:

• रिस्पॉन्सिव्ह नेव्हिगेशन: नेव्हिगेशन आयटम तयार करण्यासाठी minmax() वापरा ज्यांची किमान रुंदी असेल परंतु नेव्हिगेशन बारमधील उपलब्ध जागा भरण्यासाठी ते विस्तारू शकतात.
• लवचिक कार्ड लेआउट्स: कार्ड लेआउट तयार करण्यासाठी repeat(auto-fit, minmax()) वापरा जे विविध स्क्रीन साइझनुसार आपोआप समायोजित होतात, ज्यामुळे कार्ड लहान स्क्रीनवर व्यवस्थित रॅप होतात.
• कंटेंट-अवेयर साइडबार: साइडबारचा आकार त्यांच्या कंटेंटनुसार ठरवण्यासाठी min-content किंवा max-content वापरा, ज्यामुळे ते आवश्यकतेनुसार विस्तारू किंवा आकुंचन पावू शकतात.
• निश्चित रुंदी टाळा: विविध स्क्रीन साइझ आणि वापरकर्त्याच्या प्राधान्यांनुसार जुळवून घेणारे लेआउट तयार करण्यासाठी निश्चित रुंदी (px) चा वापर कमी करा आणि सापेक्ष युनिट्स (%, fr, em) वापरा.
• सखोल चाचणी करा: तुमचे ग्रिड लेआउट विविध डिव्हाइसेस आणि स्क्रीन साइझवर नेहमी तपासा जेणेकरून ते योग्यरित्या रेंडर होतील आणि एक सातत्यपूर्ण वापरकर्ता अनुभव प्रदान करतील.

प्रगत ग्रिड साइझिंग तंत्र

मूलभूत कीवर्ड आणि फंक्शन्सच्या पलीकडे, CSS ग्रिड ट्रॅक साइझिंगमध्ये अधिक अचूकता आणण्यासाठी प्रगत तंत्रे प्रदान करते.

repeat() फंक्शन

repeat() फंक्शन एकाच आकाराचे अनेक ट्रॅक तयार करणे सोपे करते. ते दोन युक्तिवाद घेते: पुनरावृत्तींची संख्या आणि ट्रॅकचा आकार.

            repeat(number, track-size)
            

              
                Copy
              
            
          

उदाहरणार्थ:

            grid-template-columns: repeat(3, 1fr);
            

              
                Copy
              
            
          

हे याच्या समान आहे:

            grid-template-columns: 1fr 1fr 1fr;
            

              
                Copy
              
            
          

repeat() फंक्शन auto-fit आणि auto-fill कीवर्डसह देखील वापरले जाऊ शकते जेणेकरून उपलब्ध जागेनुसार आपोआप समायोजित होणारे रिस्पॉन्सिव्ह ग्रिड लेआउट तयार करता येतात.

auto-fit आणि auto-fill कीवर्ड्स

हे कीवर्ड repeat() फंक्शनसह वापरले जातात जेणेकरून ग्रिडमधील आयटमची संख्या आणि उपलब्ध जागेनुसार जुळवून घेणारे रिस्पॉन्सिव्ह ग्रिड तयार करता येतात. त्यांच्यातील मुख्य फरक ते रिकामे ट्रॅक कसे हाताळतात यात आहे.

• auto-fit: जर सर्व ट्रॅक रिकामे असतील, तर ट्रॅक 0 रुंदीपर्यंत कोलॅप्स होतील.
• auto-fill: जर सर्व ट्रॅक रिकामे असतील, तर ट्रॅक त्यांचा आकार कायम ठेवतील.

उदाहरण: रिस्पॉन्सिव्ह स्तंभांसाठी auto-fit वापरणे

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

            

              
                Copy
              
            
          

या उदाहरणात, ग्रिड शक्य तितके स्तंभ तयार करेल जे किमान 200px रुंद असतील परंतु उर्वरित जागा भरण्यासाठी विस्तारू शकतील. जर सर्व स्तंभ भरण्यासाठी पुरेसे आयटम नसतील, तर रिकामे स्तंभ 0 रुंदीपर्यंत कोलॅप्स होतील.

आंतरराष्ट्रीयीकरण (i18n) आणि स्थानिकीकरण (l10n) साठी विचार

जागतिक प्रेक्षकांसाठी लेआउट डिझाइन करताना, विविध भाषा आणि लेखन दिशांच्या परिणामाचा विचार करणे महत्त्वाचे आहे. विविध भाषांमध्ये मजकुराची लांबी लक्षणीयरीत्या बदलू शकते, ज्यामुळे ट्रॅकचा आकार योग्यरित्या कॉन्फिगर न केल्यास लेआउटवर परिणाम होऊ शकतो. आंतरराष्ट्रीयीकृत लेआउट डिझाइन करण्यासाठी येथे काही टिप्स आहेत:

• सापेक्ष युनिट्स वापरा: वापरकर्त्याच्या फॉन्ट-साइझ प्राधान्यांनुसार मजकूर स्केल होऊ देण्यासाठी पिक्सेलसारख्या निश्चित युनिट्सऐवजी em, rem आणि टक्केवारीसारख्या सापेक्ष युनिट्सला प्राधान्य द्या.
• इंट्रिन्सिक साइझिंग: min-content, max-content, आणि fit-content() सारखे इंट्रिन्सिक साइझिंग कीवर्ड वापरा जेणेकरून ट्रॅक भाषेची पर्वा न करता कंटेंटच्या आकारानुसार जुळवून घेतील.
• लॉजिकल प्रॉपर्टीज: डावीकडून-उजवीकडे (LTR) आणि उजवीकडून-डावीकडे (RTL) दोन्ही भाषांना समर्थन देण्यासाठी left आणि right सारख्या भौतिक प्रॉपर्टीजऐवजी inline-start आणि inline-end सारख्या लॉजिकल प्रॉपर्टीज वापरा.
• चाचणी: संभाव्य समस्या ओळखण्यासाठी आणि त्यांचे निराकरण करण्यासाठी तुमचे लेआउट विविध भाषा आणि लेखन दिशांसह तपासा. विविध भाषांमध्ये आढळणाऱ्या लांब स्ट्रिंग्सचे अनुकरण करा.

निष्कर्ष

CSS ग्रिड ट्रॅक साइझिंग हे रिस्पॉन्सिव्ह आणि जुळवून घेणारे वेब लेआउट तयार करण्यासाठी एक शक्तिशाली आणि बहुमुखी साधन आहे. इंट्रिन्सिक आणि एक्सट्रिन्सिक साइझिंगच्या संकल्पनांवर प्रभुत्व मिळवून, minmax() फंक्शन समजून घेऊन, आणि repeat() फंक्शनचा फायदा घेऊन, तुम्ही विविध कंटेंट आणि स्क्रीन साइझनुसार सुंदरपणे जुळवून घेणारे लेआउट तयार करू शकता. जागतिक प्रेक्षकांसाठी डिझाइन करताना आंतरराष्ट्रीयीकरण आणि स्थानिकीकरणाच्या परिणामाचा विचार करण्याचे लक्षात ठेवा.

विविध ट्रॅक साइझिंग तंत्रांसह प्रयोग करा आणि CSS ग्रिडच्या अमर्याद शक्यतांचा शोध घ्या. सरावाने आणि या संकल्पनांच्या ठोस समजुतीने, तुम्ही कोणत्याही प्रकल्पासाठी अत्याधुनिक आणि वापरकर्ता-अनुकूल वेब लेआउट तयार करण्यासाठी सुसज्ज असाल.